<template>
	<CommonContainer
		:style="customStyle"
		title="审批进度"
		v-if="flows.length > 0"
		class="commonContainer">
		<div>
			<el-timeline :reverse="true">
				<el-timeline-item
					v-for="(activity, index) in flows"
					:key="index"
					:color="
						activity.auditResults == '拒绝'
							? '#F5222D'
							: activity.nodeType == 3 || activity.nodeType == 4
							? '#DADADA'
							: activity.nodeType == 1
							? '#1890FF'
							: activity.nodeType == 2
							? '#1890FF'
							: ''
					">
					<div class="status">
						<span
							class="name"
							v-if="
								activity.nodeType !== 3 &&
								activity.nodeType !== 4
							">
							{{ activity.assignee }}
						</span>
						<span class="comp">
							{{ activity.activityName }}
						</span>
					</div>
					<span
						style="line-height: 23px; color: #666666"
						v-if="activity.endTime"
						class="time">
						{{ activity.endTime }}
					</span>
					<div
						v-if="activity.nodeType == 3 || activity.nodeType == 4"
						class="timeLineItem willAudit">
						待审核
					</div>
					<div v-else>
						<div
							v-if="activity.auditResults == '拒绝'"
							class="timeLineItem willAudit">
							<div class="unpass">拒绝</div>
							<div>
								原因：
								<span>{{ activity.message }}</span>
							</div>
						</div>
						<div v-else class="timeLineItem">
							<div class="pass">
								{{ activity.auditResults }}
							</div>
							<div class="willAudit" v-if="activity.message">
								原因：
								<span>{{ activity.message }}</span>
							</div>
						</div>
					</div>
					<!-- <div -->
					<!-- v-if=" -->
					<!-- activity.nodeType == 1 || activity.nodeType == 2 -->
					<!-- " -->
					<!-- > -->
					<!-- <div> -->
					<!-- <span v-if="activity.nodeType == 2"> -->
					<!-- {{ activity.activityName }} -->
					<!-- </span> -->
					<!-- {{ activity.assignee }} -->
					<!-- {{ activity.auditResults }} -->
					<!-- </div> -->
					<!-- <div v-if="activity.message"> -->
					<!-- 原因： {{ activity.message }} -->
					<!-- </div> -->
					<!-- <div class="timeLine_time" v-if="activity.endTime"> -->
					<!-- {{ activity.endTime }} -->
					<!-- </div> -->
					<!-- </div> -->
					<!-- <div -->
					<!-- v-if=" -->
					<!-- activity.nodeType == 3 || activity.nodeType == 4 -->
					<!-- " -->
					<!-- > -->
					<!-- 待{{ activity.activityName }}审核 -->
					<!-- </div> -->
				</el-timeline-item>
			</el-timeline>
		</div>
	</CommonContainer>
</template>

<script>
	import { FlowRecord } from '@/api/flowable/examine/details/api';

	export default {
		components: {},
		props: {
			id: {
				type: String,
				default: '',
			},
			customStyle: {
				type: String,
				default: 'margin: 20px 20px 0 0',
			},
		},
		data() {
			// 这里存放数据
			return {
				flows: [],
				firstEnter: true,
			};
		},
		watch: {
			id: {
				handler(val) {
					if (
						this.firstEnter &&
						val !== undefined &&
						val !== null &&
						val !== ''
					) {
						this.firstEnter = false;

						this.getData();
					}
				},
				immediate: true,
			},
		},
		methods: {
			getData() {
				if (!this.notEmpty(this.id)) return;
				FlowRecord({
					id: this.id,
				}).then(res => {
					this.flows = res.data ?? [];
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.commonContainer {
		width: 350px;
		position: sticky;
		top: 0;
	}
	.timelineItem {
		font-size: 14px;
		font-weight: 500;
		color: #666666;

		.recordContent {
			color: #333333;
			//margin: 0 8px;
		}
	}

	.approveContent {
		background-color: #f9fbfe;
		padding: 16px;
		border-radius: 4px;
	}

	::v-deep ul {
		display: block;
		padding-inline-start: 0px;
	}

	.timeLine_time {
		color: #8c8c8c;
		margin-top: 3px;
	}

	.dialog_content {
		display: flex;
		justify-content: center;
	}

	.status {
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-all;
		.name {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 20px;
		}

		.comp {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 20px;
		}

		.time {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 20px;
		}
	}

	.timeLineItem {
		box-sizing: border-box;
		padding: 15px;
		background: #f9fbfe;
		border-radius: 4px;
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 20px;
	}

	.willAudit {
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #71767b;
		line-height: 22px;
	}

	.pass {
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #52c41a;
		line-height: 20px;
	}

	.unpass {
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #f5222d;
		line-height: 20px;
	}

	::v-deep .el-timeline-item__wrapper {
		padding-left: 20px !important;
	}
</style>
